﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幸运赛车</title>
	<style>
		*{
			font-family: "微软雅黑";
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.content{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.preTitle{
			width: 100%;
			height: 50px;
			padding: 0px 10px;
			background-color: #12456C;
		}
		.preTitle p{
			float: left;
			font-size: 14px;
			line-height: 40px;
			color: #FFFFFF;
		}
		.preTitle section{
			float: right;
		}
		.preTitle section span{
			float: right;
			width: 30px;
			height: 30px;
			background-color: #1ca5ce;
			margin: 10px 0px 10px 5px;
			color: #FFFFFF;
			font-size: 14px;
			line-height: 30px;
			text-align: center;
			border-radius: 50%;
		}
		#banner{
			width: 100%;
			height: 320px;
			background-image: url(./image/che_bg.jpg);
			background-repeat: repeat no-repeat;
			background-size: auto 100%;
			background-position: 0px center;
			position: relative;
			text-align: center;
		}
		#banner img.che{
			position: absolute;
			left: 0px;
			top: 0px;
			height: 32px;
			width: auto;
		}
		#banner img#che_1{
			top: 60px;
			left: 0px;
			z-index: 1;
		}
		#banner img#che_2{
			top: 84px;
			left: 8px;
			z-index: 2;
		}
		#banner img#che_3{
			top: 108px;
			left: 16px;
			z-index: 3;
		}
		#banner img#che_4{
			top: 132px;
			left: 24px;
			z-index: 4;
		}
		#banner img#che_5{
			top: 156px;
			left: 34px;
			z-index: 5;
		}
		#banner img#che_6{
			top: 180px;
			left: 45px;
			z-index: 6;
		}
		#banner img#che_7{
			top: 204px;
			left: 56px;
			z-index: 7;
		}
		#banner img#che_8{
			top: 228px;
			left: 65px;
			z-index: 8;
		}
		#banner img#che_9{
			top: 252px;
			left: 76px;
			z-index: 9;
		}
		#banner img#che_10{
			top: 274px;
			left: 85px;
			z-index: 10;
		}
		#banner #cheSatrt{
			height: 200px;
			width: auto;
			position: absolute;
			top: 80px;
		}
		#banner #cheSatrt.start{
			left: 80px;
		}
		#banner #cheSatrt.end{
			right: 20px;
		}
		#banner #openImage{
			display: none;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: 11;
			text-align: center;
			background-color: #111;
		}
		#banner #openImage section{
			width: 560px;
			height: 320px;
			margin: 0px auto;
			background-image: url(./image/openImage.jpg);
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
			position: relative;
		}
		#banner #openImage span{
			display: inline-block;
			width: 28px;
			height: 28px;
			border-radius: 4px;
			background-color: #fff;
			color: #000000;
			font-size: 18px;
			line-height: 26px;
			text-align: center;
			overflow: hidden;
			position: absolute;
			top: 200px;
		}
		#banner #openImage span.openTwo{
			left: 97px;
		}
		#banner #openImage span.openOne{
			left: 267px;
		}
		#banner #openImage span.openThr{
			left: 433px;
		}
		#banner #currOpenTimer{
			display: none;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			text-align: center;
			z-index: 11;
			text-align: center;
		}
		#banner #currOpenTimer p{
			display: block;
			width: 100px;
			height: 40px;
			font-size: 14px;
			color: #111111;
			text-align: center;
			line-height: 40px;
			margin: 140px auto;
			font-weight: bold;
			background-image: url(./image/openTimer.png);
			background-size: 100% 100%;
			background-position: center;
		}
		.title{
			position: relative;
			height: 50px;
			width: 100%;
			background-color: #061731;
			color: #FFFFFF;
    		padding: 0px 40px 0px 10px;
		}
		.title span{
			float: left;
		    color: #fff;
		    font-size: 16px;
		    line-height: 50px;
		}
		.title p{
			float: right;
		    color: #fff;
		    line-height: 50px;
		    font-size: 16px;
		}
		.title p span{
			float: none;
		}
		.title div{
			position: absolute;
			top: 0px;
			right: 0px;
			width: 40px;
			height: 50px;
			background-image: url(./image/vioce_u.png);
			background-repeat: no-repeat;
			background-size: 30px;
			background-position: center;
		}
		.title div.active{
			background-image: url(./image/vioce_p.png);
		}
		#showAlertMask{
			display: none;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			background-color: rgba(1,1,1,6);
			z-index: 99;
		}
		#showAlertMask .alertBox{
			width: 320px;
			height: 200px;
			margin: 70px auto;
			background-color: #FFFFFF;
		}
		#showAlertMask .alertHeader{
			width: 100%;
			height: 50px;
			background-color: #12456C;
			padding: 0px 20px;
		}
		#showAlertMask .alertHeader span{
			color: #FFFFFF;
			font-size: 14px;
			line-height: 50px;
			float: left;
		}
		#showAlertMask .alertHeader img{
			width: 16px;
			height: 16px;
			float: right;
			margin: 12px 0px;
			cursor: pointer;
		}
		#showAlertMask .alertBtn{
			width: 100%;
			height: 50px;
			background-color: #FFFFFF;
			border-top: 1px solid #E3E3E3;
			text-align: center;
		}
		#showAlertMask .alertBtn button{
			height: 30px;
			width: 60px;
			border: none;
			background-color: #12456C;
			color: #FFFFFF;
			outline: none;
			border-radius: 4px;
			margin: 10px 0px;
			cursor: pointer;
		}
		#showAlertMask .alertP{
			padding: 20px;
			width: 100%;
			height: calc(100% - 100px);
		}
		#showAlertMask .alertP p{
			font-size: 14px;
			line-height: 30px;
			color: #333333;
			text-align: center;
		}
	</style>
</head>
<body>
    <div class="content">
    	<div id="jplayer"></div>
    	<div class="preTitle">
    		<p>期号：<span class="preId"></span></p>
    		<section id="preOpenNumb">
    			<span class="preTen"></span>
    			<span class="preNin"></span>
    			<span class="preEht"></span>
    			<span class="preSvn"></span>
    			<span class="preSix"></span>
    			<span class="preFiv"></span>
    			<span class="preFor"></span>
    			<span class="preThr"></span>
    			<span class="preTwo"></span>
    			<span class="preOne"></span>
    		</section>
    	</div>
		<div id="banner">
			<img class="che" id="che_1" src="./image/che_1.png" alt="alt">
			<img class="che" id="che_2" src="./image/che_2.png" alt="alt">
			<img class="che" id="che_3" src="./image/che_3.png" alt="alt">
			<img class="che" id="che_4" src="./image/che_4.png" alt="alt">
			<img class="che" id="che_5" src="./image/che_5.png" alt="alt">
			<img class="che" id="che_6" src="./image/che_6.png" alt="alt">
			<img class="che" id="che_7" src="./image/che_7.png" alt="alt">
			<img class="che" id="che_8" src="./image/che_8.png" alt="alt">
			<img class="che" id="che_9" src="./image/che_9.png" alt="alt">
			<img class="che" id="che_10" src="./image/che_10.png" alt="alt">
			<img id="cheSatrt" class="start" src="./image/start_end.png" alt="alt">
			<div id="openImage">
				<section><span class="openTwo"></span><span class="openOne"></span><span class="openThr"></span></section>
			</div>
			<div id="currOpenTimer">
				<p>00:00:00</p>
			</div>
		</div>
        <div class="title">
            <span data-id="888888"></span>
            <p>距离截止时间<span class="leto_timer"></span></p>
            <div id="playVioce" class="active"></div>
        </div>
    </div>
    <div id="showAlertMask">
    	<div class="alertBox">
    		<div class="alertHeader">
	    		<span>信息</span>
	    		<img id="closeAlertMask" src="image/close_white.png" alt="alt" />
	    	</div>
	    	<div class="alertP">
	    		<p id="showAlertMessage"></p>
	    	</div>
	    	<div class="alertBtn">
	    		<button type="button" id="sureAlertMask">确定</button>
	    	</div>
    	</div>
    </div>
    <script src="./jplayer/jquery.min.js"></script>
	<script src="./jplayer/jquery.jplayer.js"></script>
    <script src="./jplayer/extend.js"></script>
    <script src="./jplayer/commFun.js"></script>
    <script src="./jplayer/querystring.js"></script>
    <script>
        $(function(){
//            window.queryString = new QueryStringParser();
//            var urlPrefix = queryString.getParam("urlPrefix") || "/";
            var urlPrefix = "/";
//            var urlPrefix = "http:///localhost:1337/demo.web.blh.jacking.cn/";
			var stopTopData = null;
            //获取当前期次
			getCurrLetoInfo();
			function getCurrLetoInfo(){
				$.ajaxFormat({
					url: urlPrefix + 'api/get_curr_issue'
					,dataType: 'json'
					,type: 'post'
					,data: {lot_type: 'xysc'}
					,success: function(d){
						console.log('当前期次');
						console.log(d)
						if(d.success == true){
							var currTime = new Date(d.curr_time).getTime();
							var stopTime = new Date(d.time_endsale).getTime();
							console.log(currTime<stopTime)
							if(currTime<stopTime){
								$('.title>span').text('期号：'+d.issueid).attr('data-id',d.issueid);
								$('.preId').text(d.previous_issue_id);
								$('#banner').attr('data-prevId',d.previous_issue_id);
								calcLetoStopTimer(d.curr_time,d.time_endsale);
								calcLetoCurrOpenTimer(d.curr_time,d.time_openaward);
								if(d.previous_openaward_num){
									var openNumbArray = d.previous_openaward_num.split(',');
									$('#preOpenNumb').find('span').each(function(i,item){
										var currNumb = openNumbArray[openNumbArray.length-i-1];
										$(item).text((currNumb));
									})
									showLtoCurrOpenTimer();//本期开奖倒计时
								}else{
									calcLetoOpenTimer(d.curr_time,d.previous_time_openaward);//上期开奖倒计时
									animateXYSCPrevInit();//上期开奖号码动画
									animateXYSCBGInit();//赛车背景动画
									animateXYSCInit();//车动画
									playVioceByJplayer();//播放声音
								}
							}else{
								getCurrLetoInfo();
							}
						}else{
							if(d.message.code==400){
								//window.location.href = 'login.html';
							}else{
								//window.commFun.showAlert(d.message.content);
							}
						}
					}
				})
			}
            
			
			function calcLetoOpenTimer(currTime,openTime){
				var now = new Date(currTime).getTime();
				var open = new Date(openTime).getTime();
				var timer = (open-now)<0 ? 1000 : (open-now);
				setTimeout(function(){
					var openNumbTimer = setInterval(function(){
						$.ajaxFormat({
							url: urlPrefix + 'api/get_award_issue'
							,dataType: 'json'
							,type: 'post'
							,data: {
								lot_type: 'xysc'
								,issue_id: $('#banner').attr('data-prevId')
							}
							,success: function(d){
								//console.log('获取上一期的开奖号码');
								//console.log(d);
								if(d.success==true){
									if(d.openaward_num){
										$('#jplayer').jPlayer('stop');
										clearInterval(openNumbTimer);
										var openNumbArray = d.openaward_num.split(' ');
										stopTopData = {
											numbOne: openNumbArray[0]
											,numbTwo: openNumbArray[1]
											,numbThr: openNumbArray[2]
											,numbFor: openNumbArray[3]
											,numbFve: openNumbArray[4]
											,numbSix: openNumbArray[5]
											,numbSen: openNumbArray[6]
											,numbEgt: openNumbArray[7]
											,numbNin: openNumbArray[8]
											,numbTen: openNumbArray[9]
										}
									}
								}else{
									if(d.message.code==400){
										//window.location.href='login.html';
									}else{
										//window.commFun.showAlert(d.message.content);
									}
								}
							}
						})
					},3000);
				},timer);
			}
			
			//上期开奖号码动画
			function animateXYSCPrevInit(){
				$('#preOpenNumb').find('span').each(function(i,item){
					var randNumb = Math.floor(Math.random()*10+1);
					$(item).text((randNumb<10 ? '0'+randNumb : randNumb));
				})
				var prevAnimateTimer = setInterval(function(){
					if(stopTopData){
						$('#preOpenNumb').find('span').each(function(i,item){
							if($(item).attr('class')=='preOne'){
								$(item).text(stopTopData.numbOne);
							}else if($(item).attr('class')=='preTwo'){
								$(item).text(stopTopData.numbTwo);
							}else if($(item).attr('class')=='preThr'){
								$(item).text(stopTopData.numbThr);
							}else if($(item).attr('class')=='preFor'){
								$(item).text(stopTopData.numbFor);
							}else if($(item).attr('class')=='preFiv'){
								$(item).text(stopTopData.numbFve);
							}else if($(item).attr('class')=='preSix'){
								$(item).text(stopTopData.numbSix);
							}else if($(item).attr('class')=='preSvn'){
								$(item).text(stopTopData.numbSen);
							}else if($(item).attr('class')=='preEht'){
								$(item).text(stopTopData.numbEgt);
							}else if($(item).attr('class')=='preNin'){
								$(item).text(stopTopData.numbNin);
							}else if($(item).attr('class')=='preTen'){
								$(item).text(stopTopData.numbTen);
							}
						})
					}else{
						var cheIndexArray = [];
						var cheOffLeftArray = [];
						$('.che').each(function(i,item){
							var insertIndex = 0;
							if(cheIndexArray.length && cheOffLeftArray.length){
								for(var k=0;k<cheOffLeftArray.length;k++){
									if($(item).offset().left > cheOffLeftArray[k]){
										insertIndex = k;
										break;
									}else{
										if(k == (cheOffLeftArray.length-1)){
											insertIndex = -1;
										}
									}
								}
								if(insertIndex==(-1)){
									cheIndexArray.push($(item).attr('id').substring(4));
									cheOffLeftArray.push($(item).offset().left);
								}else{
									cheIndexArray.splice(insertIndex,0,$(item).attr('id').substring(4));
									cheOffLeftArray.splice(insertIndex,0,$(item).offset().left);
								}
							}else{
								cheIndexArray.push($(item).attr('id').substring(4));
								cheOffLeftArray.push($(item).offset().left);
							}
						})
						$('#preOpenNumb').find('span').each(function(i,item){
							var currNumb = cheIndexArray[cheIndexArray.length-i-1];
							$(item).text((currNumb<10 ? '0'+currNumb : currNumb));
						})
					}
				},500);
			}
			
			//背景动画
			function animateXYSCBGInit(){
				var maxLeft = $('#banner').width();
				$('#banner').animate({backgroundPositionX: '-='+maxLeft+'px'},1000,'linear');
				$('#cheSatrt').css('display','none');
			    var bgAnimateTimer = setInterval(function(){
					if(stopTopData){
						clearInterval(bgAnimateTimer);
						$('#cheSatrt').css('display','');
						$('#cheSatrt').removeClass('start');
						$('#cheSatrt').addClass('end');
						$('#banner').animate({backgroundPositionX: '0px'},1000,'linear');
					}else{
						$('#banner').animate({backgroundPositionX: '-='+maxLeft+'px'},1000,'linear');
					}
				},1000);
			}
			//车动画
			function animateXYSCInit(){
				var maxLeft = $('#banner').width() / 2;
				var totalLeft = $('#banner').width();
				$('.che').each(function(i,item){
					var stopLeft = maxLeft + (Math.random()-0.5)*600;
					$(item).animate({'left': stopLeft+'px'},3000);
				});
				var cheAnimateTimer = setInterval(function(){
					$('.che').each(function(i,item){
						if(stopTopData){
							setTimeout(function(){
								showAnimateStopImage(stopTopData);
								clearInterval(cheAnimateTimer);
							},2000);
							if($(item).attr('id')=='che_'+(stopTopData["numbOne"]-0)){
								$(item).animate({'left': totalLeft+'px'},1000);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbTwo"]-0)){
								$(item).animate({'left': totalLeft+'px'},1100);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbThr"]-0)){
								$(item).animate({'left': totalLeft+'px'},1200);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbFor"]-0)){
								$(item).animate({'left': totalLeft+'px'},1300);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbFve"]-0)){
								$(item).animate({'left': totalLeft+'px'},1400);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbSix"]-0)){
								$(item).animate({'left': totalLeft+'px'},1500);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbSen"]-0)){
								$(item).animate({'left': totalLeft+'px'},1600);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbEgt"]-0)){
								$(item).animate({'left': totalLeft+'px'},1700);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbNin"]-0)){
								$(item).animate({'left': totalLeft+'px'},1800);
							}else if($(item).attr('id')=='che_'+(stopTopData["numbTen"]-0)){
								$(item).animate({'left': totalLeft+'px'},1900);
							}
						}else{
							var stopLeft = maxLeft + (Math.random()-0.5)*600;
							$(item).animate({'left': stopLeft+'px'},3000);
						}
					});
				},3000);
			}
			//当前期次结束时间
			function calcLetoStopTimer(startTime,endTime){
            	var sTimer = new Date(startTime).getTime();
            	var eTimer = new Date(endTime).getTime();
            	var timer = eTimer - sTimer;
            	var hour = Math.floor((timer / (60*60*1000)));
            	var minute = Math.floor((timer - hour*60*60*1000) / (60*1000));
            	var second = Math.floor((timer - hour*60*60*1000 - minute*60*1000) / 1000);
            	$('.leto_timer').text((hour<10 ? '0'+hour : hour)+':'+(minute<10?'0'+minute:minute)+':'+(second<10?'0'+second:second));
            	var letoStopTimer = setInterval(function(){
            		second--;
            		if(second<0){
            			minute--;
            			if(minute<0){
            				hour--;
            				if(hour<0){
            					hour = 0;
            					minute = 0;
            					second = 0;
	            				clearInterval(letoStopTimer);
	            				showAlertMask('当前期次投注已经截止，投注时请注意期次！');
            				}else{
            					minute = 59;
            					second = 59;
            				}
            			}else{
            				second = 59;
            			}
            		}
            		$('.leto_timer').text((hour<10 ? '0'+hour : hour)+':'+(minute<10?'0'+minute:minute)+':'+(second<10?'0'+second:second));
            	},1000);
            }
			
			
			//当前期次开奖倒计时
			function calcLetoCurrOpenTimer(currTime,endTime){
				currTime = currTime.replace(/-/g,'/');
				endTime = endTime.replace(/-/g,'/');
				var sTimer = new Date(currTime).getTime();
            	var eTimer = new Date(endTime).getTime();
            	var timer = eTimer - sTimer;
            	var hour = Math.floor((timer / (60*60*1000)));
            	var minute = Math.floor((timer - hour*60*60*1000) / (60*1000));
            	var second = Math.floor((timer - hour*60*60*1000 - minute*60*1000) / 1000);
            	$('#currOpenTimer p').text((hour<10 ? '0'+hour : hour)+':'+(minute<10?'0'+minute:minute)+':'+(second<10?'0'+second:second));
            	var letoStopTimer = setInterval(function(){
            		second--;
            		if(second<0){
            			minute--;
            			if(minute<0){
            				hour--;
            				if(hour<0){
            					hour = 0;
            					minute = 0;
            					second = 0;
            					clearInterval(letoStopTimer);
            				}else{
            					minute = 59;
            					second = 59;
            				}
            			}else{
            				second = 59;
            			}
            		}
            		$('#currOpenTimer p').text((hour<10 ? '0'+hour : hour)+':'+(minute<10?'0'+minute:minute)+':'+(second<10?'0'+second:second));
            	},1000);
			}
			
			function showAnimateStopImage(stopTopData){
				$('#openImage').css('display','block');
				$('#openImage').find('.openOne').text(stopTopData.numbOne);
				$('#openImage').find('.openTwo').text(stopTopData.numbTwo);
				$('#openImage').find('.openThr').text(stopTopData.numbThr);
				
				setTimeout(function(){
					showLtoCurrOpenTimer();
				},10000);
			}
			
			
			//本期开奖倒计时
			function showLtoCurrOpenTimer(){
				$('#openImage').css('display','none');
				$('.che').css('display','none');
				$('#cheSatrt').css('display','none');
				$('#currOpenTimer').css('display','block');
			}
			//播放声音
			function playVioceByJplayer(){
				$('#jplayer').jPlayer({
					ready: function (event) {
		            $(this).jPlayer("setMedia", {
		                title: "Bubble",
		                mp3: "./jplayer/mp3/xysc.mp3"
			            }).jPlayer("play");
			        },
			        swfPath: "js",
			        supplied: "mp3",
			        wmode: "window",
			        smoothPlayBar: true,
			        keyEnabled: true,
			        remainingDuration: true,
			        toggleDuration: true,
			        loop: true
				})
				
				$('#playVioce').on('click',function(){
					var isPlayVioce = $('#playVioce').hasClass('active');
					if(isPlayVioce){
						$('#playVioce').removeClass('active');
						$('#jplayer').jPlayer('stop');
					}else{
						$('#playVioce').addClass('active');
						$('#jplayer').jPlayer('play');
					}
				})
			}
			
			function showAlertMask(messge){
				$('#showAlertMask').css('display','block');
				$('#showAlertMask').find('#showAlertMessage').text(messge);
				
				$('#closeAlertMask,#sureAlertMask').off().on('click',function(){
					$('#showAlertMask').css('display','none');
					window.location.reload();
				})
				setTimeout(function(){
					$('#showAlertMask').css('display','none');
					window.location.reload();
				},5000);
			}
        })
    </script>
</body>
</